<template>
	<view class="zh-service">
		<image :src="IMG_URL + '/service/index/banner.png'" class="banner"/>
		<view class="box">
			<view class="title">
				<text>代理采购</text>
			</view>
			<view class="content display-flex justify-between">
				<view class="item" @click="navigateTo('/pages/service/purchase')">
					<view class="right">
						<image :src="IMG_URL + '/service/index/purchase.png'" class="purchase-icon"/>
					</view>
					<view class="sub-title">
						<text>代理采购</text>
					</view>
					<view class="des">
						<text>高效匹配需求</text>
						<text>把握商机</text>
					</view>
					<view class="btn">
						<text>去看看</text>
					</view>
				</view>
				<view class="item" @click="navigateTo('/pages/service/sale')">
					<view class="right">
						<image :src="IMG_URL + '/service/index/sale.png'" class="sale-icon"/>
					</view>
					<view class="sub-title">
						<text>代理销售</text>
					</view>
					<view class="des">
						<text>对接上下游资源</text>
						<text>解决用户痛点</text>
					</view>
					<view class="btn">
						<text>去看看</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="title">
				<text>纺织供应链</text>
			</view>
			<view class="content display-flex justify-between">
				<view class="item" @click="navigateTo('/pages/service/logistics')">
					<view class="right">
						<image :src="IMG_URL + '/service/index/logistics.png'" class="logistics-icon"/>
					</view>
					<view class="sub-title">
						<text>仓储物流</text>
					</view>
					<view class="des">
						<text>货物安全有保障</text>
					</view>
					<view class="btn display-flex align-center justify-center">
						<text>去看看</text>
						<image src="@/static/icons/right_arrow_white.png" class="right-arrow"/>
					</view>
				</view>
				<view>
					<view class="item_2 item_3" @click="navigateTo('/pages/service/agent')">
						<view class="right">
							<image :src="IMG_URL + '/service/index/agent.png'" class="agent-icon"/>
						</view>
						<view class="sub-title">
							<text>代理进出口</text>
						</view>
						<view class="des">
							<text>专业纺织外贸团队</text>
						</view>
						<view class="btn_1 btn  display-flex align-center justify-center">
							<text>去看看</text>
							<image src="@/static/icons/right_arrow_white.png" class="right-arrow"/>
						</view>
					</view>
					<view class="item_2 item_4" @click="navigateTo('/pages/service/chain')">
						<view class="right">
							<image :src="IMG_URL + '/service/index/chain.png'" class="chain-icon"/>
						</view>
						<view class="sub-title">
							<text>供应链整合</text>
						</view>
						<view class="des">
							<text>上下游资源整合对接</text>
						</view>
						<view class="btn_2 btn  display-flex align-center justify-center">
							<text>去看看</text>
							<image src="@/static/icons/right_arrow_white.png" class="right-arrow"/>
						</view>
					</view>
				</view>
			</view>
			<view class="item_5" @click="navigateTo('/pages/service/inFee')">
				<view class="right">
					<image :src="IMG_URL + '/service/index/fee.png'" class="fee-icon"/>
				</view>
				<view class="sub-title">
					<text>增值服务</text>
				</view>
				<view class="des">
					<text>提供专业的个性化服务，赋能客户</text>
				</view>
			</view>
		</view>
		<view class="box_3 display-flex align-center justify-between" @click="openServiceLink">
			<view class="display-flex align-center">
				<image src="@/static/icons/business_service.png" class="business-service"/>
				<text class="ml-20 font-32">业务洽谈</text>
			</view>
			<image src="@/static/icons/right_arrow_light.png" class="right-arrow"/>
		</view>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService" @save="saveService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { tip } from '@/utils'
	import { onHide, onShareAppMessage } from '@dcloudio/uni-app'
	import serviceLink from '@/pages/components/service-link'
	
	import { IMG_URL } from '@/utils/constant'
	const showServiceLink = ref(false)
	
	onHide(() => {
		showServiceLink.value = false
	})
	
	onShareAppMessage(() => {})
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('拨打电话成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const saveService = () => {
		tip.showToast('已保存，请用微信扫码加好友')
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-service {
		padding-bottom:120rpx;
		.banner {
			width:100%;
			height:246rpx;
		}
		.box {
			background-color: #fff;
			margin:20rpx 24rpx;
			border-radius: 16rpx;
			.title {
				color:#333;
				font-size:36rpx;
				padding:40rpx 25rpx 0;
				font-weight: bold;
			}
			.content {
				padding:34rpx 12rpx 15rpx;
				.item:nth-child(1) {
					background-color: #FAF2E7;
				}
				.item:nth-child(2) {
					background-color: #EBF9FF;
				}
				.item {
					width: 331rpx;
					height: 216rpx;
					border-radius: 16rpx;
					position:relative;
					cursor: pointer;
					.right {
						position:absolute;
						right:19rpx;
						bottom:0;
						image {
							width:100rpx;
							height:100rpx;
						}
					}
					.sub-title {
						margin: 29rpx 19rpx 0 25rpx;
						font-size: 28rpx;
						font-weight: bold;
					}
					.des {
						margin-top: 18rpx;
						color:#979595;
						font-size: 24rpx;
						margin-left:24rpx;
						margin-top:16rpx;
						text {
							display:block;
						}
					}
					.btn {
						width: 116rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: rgba(23,138,255,0.1);
						border-radius: 24rpx;
						text-align: center;
						color:#178AFF;
						font-size: 24rpx;
						margin-left:24rpx;
						margin-top:16rpx;
					}
				}
			}
		}
		.box2 {
			background-color: #fff;
			margin:20rpx 24rpx;
			border-radius: 16rpx;
			padding-bottom:15rpx;
			.title {
				color:#333;
				font-size:36rpx;
				padding:40rpx 25rpx 0;
				font-weight: bold;
			}
			.content {
				padding:34rpx 12rpx 15rpx;
				.item {
					width: 331rpx;
					height: 342rpx;
					border-radius: 16rpx;
					position:relative;
					background: linear-gradient(225deg, #E7F6FF, #DAF2FF);
					cursor: pointer;
					.right {
						position:absolute;
						right:0rpx;
						bottom:0;
						image {
							width:261rpx;
							height:263rpx;
						}
					}
					.sub-title {
						margin: 33rpx 19rpx 0 30rpx;
						font-size: 36rpx;
						font-weight: bold;
						color:#048AF2;
					}
					.des {
						color:#1D94F9;
						font-size: 20rpx;
						margin-left:30rpx;
						margin-top:13rpx;
						text {
							display:block;
						}
					}
					.btn {
						width: 112rpx;
						height: 44rpx;
						line-height: 44rpx;
						background: linear-gradient(90deg, #0566F7, #2CA4F6);
						border-radius: 24rpx;
						text-align: center;
						color:#FFFFFF;
						font-size: 22rpx;
						margin-left:30rpx;
						margin-top:34rpx;
						.right-arrow {
							width:7rpx;
							height:12rpx;
							margin-left:9rpx;
						}
					}
				}
				.item_3 {
					background: linear-gradient(210deg, #D8F8FF, #E4F9FF);
				}
				.item_4 {
					margin-top: 16rpx;
					background: linear-gradient(210deg, #F5F4FF, #EAE8FD);
				}
				.item_2 {
					width: 331rpx;
					height: 163rpx;
					border-radius: 16rpx;
					position:relative;
					cursor: pointer;
					.right {
						position:absolute;
						right:20rpx;
						bottom:0;
						image {
							width:108rpx;
							height:108rpx;
						}
					}
					.sub-title {
						padding: 30rpx 18rpx 0 18rpx;
						font-size: 32rpx;
						font-weight: bold;
						color:#048AF2;
					}
					.des {
						color:#565859;
						font-size: 16rpx;
						margin-left:18rpx;
						margin-top:11rpx;
						text {
							display:block;
						}
					}
					.btn_1 {
						background: linear-gradient(90deg, #2FB3F7, #0CA3F1);
					}
					.btn_2 {
						background: linear-gradient(90deg, #5B71FB, #637CFA);
					}
					.btn {
						width: 78rpx;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 15rpx;
						text-align: center;
						color:#FFFFFF;
						font-size: 18rpx;
						margin-left:18rpx;
						margin-top:15rpx;
						.right-arrow {
							width:7rpx;
							height:12rpx;
							margin-left:9rpx;
						}
					}
				}
			}
			.item_5 {
				background: linear-gradient(225deg, #FDE9C5, #FFE7BD);
				border-radius: 16px;
				margin:0rpx 13rpx;
				position:relative;
				cursor: pointer;
				.right {
					position:absolute;
					right:62rpx;
					bottom:5rpx;
					image {
						width:216rpx;
						height:144rpx;
					}
				}
				.sub-title {
					padding:49rpx 0 0  30rpx;
					font-size: 36rpx;
					color:#F76B17;
					font-weight: bold;
					
				}
				.des {
					color:#F58634;
					padding:17rpx 0 52rpx 30rpx;
					font-size: 20rpx;
				}
			}
		}
		.box_3 {
			margin:20rpx 24rpx;
			background-color: #fff;
			padding:28rpx 25rpx;
			border-radius: 12px;
			cursor: pointer;
			.business-service {
				width:44rpx;
				height: 44rpx;
			}
			.right-arrow {
				width: 13rpx;
				height: 22rpx;
			}
		}
	}
</style>
